<template>
  <a-modal :title="form.id ? '修改' : '新增'" 
           :visible="visible"
           destroyOnClose
           @ok="handleOk"
           @cancel="visible = false">
    <a-form-model ref="form" :model="form" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }" :rules="rules">  
      <div v-for="item of formItems" :key="item.key">
        <!-- 循环生成表单项 -->
        <a-form-model-item :label="item.label" :prop="item.key">
          <!-- 特殊处理组件 -->
          <!-- 其他组件 -->
          <component :is="item.type" v-bind="item.attrs" v-model.trim="form[item.key]" :placeholder="`请输入${item.label}`"></component>
        </a-form-model-item>
      </div>
    </a-form-model>
  </a-modal>
</template>
<script>

export default {
  name: 'SecretyEdit',
  props: {
    /* 表单渲染格式 */
    formItems: {
      type: Array,
      /*
        {} : {
          // 文本
          labal: '',
          // form里面的key
          key: 'name',
          // 控件类型
          type: 'a-input',
          // 控件属性
          attrs: {},
          // 是否必填 默认false,
          required: false
        }
      */
      default: () => [{}]
    },
    /* 保存函数 */
    submit: {
      type: Function,
      default: () => new Promise()
    }
  },
  data () {
    return {
      // 表单对象
      form: {},
      visible: false
    }
  },
  computed: {
    /* 校验规则 */
    rules(){
      const result = {}
      for (const item of this.formItems) {
        if (item.required) {
          result[item.key] = [{ required: true, message: '请输入' + item.label }]
        }
      }
      return result
    }
  },
  methods: {
    /* 打开弹窗 */
    open(record){
      // 1、设置进来修改时的对象
      this.record = record
      // 2、设置弹窗显示
      this.visible = true
      // 3、设置表单对象
      if (record) {
        for (const key in record) {
          this.$set(this.form, key, record[key])
        }
      } else {
        this.form = {}
      }
    },
    /* 确认 */
    handleOk(){
      // 验证通过
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          // 保存
          await this.submit(this.form)
          // 关闭弹窗
          this.visible = false
        }
      })
    }
  },
}
</script>

<style lang="less" scoped>
</style>